<template>
	<view class="container">
		<view class="user-section">
			<!---->
			<!-- <image class="bg" src="/static/other/my-bg.png"></image> -->
			<view class="bg"></view>
			<view class="user-info-box">
				<view class="member-top-c">
					<!-- 已经登录、 -->
					<view v-if="hasLogin == true">
						<view class="" style="display: flex;align-items: center;" @click="toUserInfo">
							<image class="portrait" mode="aspectFill" :src="data.info.thumb"></image>
							<!-- <view class="user-name">ID:{{data.info.id }}</view> -->
							<view class="user-name">{{data.info.name }}</view>
						</view>
					</view>


					<!-- #ifdef MP-WEIXIN -->

					


					<!-- 未登录状态 -->
					<view  class="user-infor" v-if="hasLogin == false">
						<view>
							<image class="portrait" mode="aspectFill" src="/static/other/missing-face.png"></image>
						</view>
						<view class="user-name"><button class="login-btn" open-type="getUserInfo" @click="getALICode" hover-class="btn-hover">授权登录</button></view>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<view class="vip-card-box">
				<image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
				<view class="b-btn" @click="vipsee">立即查看</view>
				<view class="tit" v-if="userDetailInfo">
					<text class="yticon icon-iLinkapp-"></text>
					{{ userDetailInfo.memberLevelName || '开通会员' }}
				</view>
				<text class="e-m">会员</text>
				<!-- <text class="e-b">开通会员开发无bug 一测就上线</text> -->
			</view>
		</view>
		<view class="cover-container" :style="[
				{
					transform: coverTransform,
					transition: coverTransition
				}
			]"
		 @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			<image class="arc" src="/static/other/arc.png"></image>

			<view class="tj-sction">
				<view class="tj-item" @click="toNav('/pagesA/jifen-detail/jifen-detail')">
					<text class="num">{{data.info.jifen}}</text>
					<text>积分明细</text>
				</view>
				<view class="tj-item" @click="toNav('/pagesA/yongjin_log/yongjin_log')">
					<text class="num">{{data.info.money}}</text>
					<text>佣金明细</text>
				</view>
				<view class="tj-item" @click="toNav('/pagesA/my-xiaji/my-xiaji')">
					<text class="num">{{data.info.yi_sum}}</text>
					<text>我的下级</text>
				</view>
			</view>

			<view class="list-item">
				<view class="list-i" @click="toNav('/pagesA/integral/order')">
					<view class="list-il">
						<image src="/static/other/renwu.png" mode="widthFix"></image>
						<view>报单</view>
					</view>
					<image class="list-next" src="/static/other/next.png" mode="widthFix"></image>
				</view>
<!-- 				<view class="list-i" @click="toNav('/pagesA/integral/order')">
					<view class="list-il">
						<image src="/static/icon/treasure-act.png" mode="widthFix"></image>
						<view>复购</view>
					</view>
					<image class="list-next" src="/static/other/next.png" mode="widthFix"></image>
				</view> -->
				<view class="list-i" @click="toNav('/pagesA/problem-com/problem-com')">
					<view class="list-il">
						<image src="/static/other/wenti.png" mode="widthFix"></image>
						<view>常见问题</view>
					</view>
					<image class="list-next" src="/static/other/next.png" mode="widthFix"></image>
				</view>
				<view class="list-i" @click="toNav('/pagesA/tixian-apply/tixian-apply')">
					<view class="list-il">
						<image src="/static/other/tixian.png" mode="widthFix"></image>
						<view>申请提现</view>
					</view>
					<image class="list-next" src="/static/other/next.png" mode="widthFix"></image>
				</view>
				<view class="list-i" @click="toNav('/pagesA/notice-list/notice-list')">
					<view class="list-il">
						<image src="/static/other/gg.png" mode="widthFix"></image>
						<view>公告</view>
					</view>
					<image class="list-next" src="/static/other/next.png" mode="widthFix"></image>
				</view>
				<view class="list-i" @click="kefu">
					<view class="list-il">
						<image src="/static/other/kf.png" mode="widthFix"></image>
						<view>客服微信</view>
					</view>
					<image class="list-next" src="/static/other/next.png" mode="widthFix"></image>
				</view>
				<view class="list-i" @click="toNav('/pagesA/feedback-body/feedback-body')">
					<view class="list-il">
						<image src="/static/other/fk.png" mode="widthFix"></image>
						<view>反馈</view>
					</view>
					<image class="list-next" src="/static/other/next.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		
		<tabbars thispage='/pagesA/my/my' @iconurl='iconurl'></tabbars>
		
		<!-- <view class="footer-menu">
			<view class="icon-item" v-for="(item,index) in data.menu" :key="index" @click="iconurl(item.link)">
				<image :src="item.thumb" mode="widthFix"></image>
				<view class="icon-name">{{item.title}}</view>
			</view>
		</view> -->
		<!-- 客服微信 -->
		<view class="wechat-mask" v-if="isewm" @click="closekefu"></view>
		<view class="wechat-popup" v-if="isewm">
			<image class="ewm" :src="data.kefu_wx"></image>
			<view class="wechat-t">扫描加客服微信</view>
			<image class="close" src="/static/other/close.png" @click="closekefu"></image>
		</view>
		<!-- 邀请好友海报 -->
		<view class="post" v-show="tishi==1">
			<p style="color: #ffffff;font-size: 30upx;margin-top: 70upx;">长按保存图片至相册</p>
			<view class="content" style="text-align: center;width: 85%;margin: 0 auto;">
				<view style="padding-top: 20upx;margin-top: 30upx;background: #ffffff;">
					<view @click="guanbi">
						<img id="test" style="width: 580upx;height: 954upx;" />
					</view>
				</view>
			</view>

			<!-- #ifdef H5 -->
			<image @click="guanbi" class="cha" style="width: 80upx;height: 80upx; margin-top: 25upx; margin: 0;"></image>
			<!-- #endif -->
		</view>
			<!-- #ifdef MP-WEIXIN -->
			<poster ref="poster" v-if="posterShow"></poster>
			<!-- #endif -->
	</view>
</template>

<script>
	import tabbars from '@/components/tabbars.vue';
	import api from "../../common/fxb.js"
	//#ifdef H5 
	import canvas_x from '../../components/mg-h5hb/common/canvas_x.js';
	//#endif 
	//#ifdef MP-WEIXIN
	import poster from '../../components/zywPoster.vue';
	//#endif
	
	export default {
			components:{
				//#ifdef MP-WEIXIN
				poster,
				//#endif
				tabbars
			},
		data() {
			return {
				hasLogin: false,
				tishi: 0,
				hbbg: '../../static/other/search-bg.png',
				isewm: false,
				data: '',
				posterShow:false,
				wx_erweima:'',
			};
		},
		onLoad() {
			
			this.getdata()
		},
		methods: {
			getdata(){
				var that = this;
				api.ApiGet({
					op: '',
					do: 'my',
				}, function(res) {
					that.data = res.data.datas;
					that.hasLogin = res.data.datas.info.is_login;
				})
			},
			iconurl:function(url){
				console.log(url);
				//#ifdef H5 
				// window.location.href=url
				uni.reLaunch({
					url:url
				}) 
				//#endif
				//#ifndef H5

				uni.reLaunch({
					url:url
				}) 
				//#endif
			},
			closekefu: function() {



				this.isewm = false
			},
			kefu: function() {
				this.isewm = true
			},
			guanbi: function() {
				this.tishi = 0;
			},

			erweima: function() {
				//#ifdef H5 
				this.tishi = 1;
				var that = this;
				
				canvas_x.makeImage({
					type: that.hbbg,
					parts: [{
							type: 'image',
							url: that.hbbg,
							width: 680,
							height: 1264,
							// backgroundSize:680,
						},
						{
							type: 'qrcode',
							text: that.data.url,
							x: 150,
							y: -50,
							width: 350,
							height: 330,
							padding: 0,
							background: '#fff',
							level: 3
						},


					],
					width: 680,
					height: 1264
				}, (err, data) => {
					document.getElementById('test').src = data
				})
							//#endif
							//#ifdef MP-WEIXIN
							let postData = {
								content:''
							}
							this.posterShow = true;
							var that = this;
							api.ApiGet({
								do:'hbCode',
							},function(res){ 
								console.log( res.data.datas)
								that.wx_erweima = res.data.datas;
								console.log(that.wx_erweima)
								setTimeout(()=>{
									console.log(that.$refs)
									that.$refs.poster.drawPoster({
										url: 'https://w.02tb.com/static/other/search-bg.png',
										sLeft: 0,
										sTop: 0,
										sWidth: 1,
										sHeight: 1,
										erweima:that.wx_erweima
									}); //在组件内drawPoster()函数编写需要绘制的内容
								},300)
							})

							//#endif
			},

			toNav(url) {
				//#ifndef H5
				if(!api.is_login()){
					return false;
				}
				//#endif
				uni.navigateTo({
					url: url
				});
			},
			vipsee: function() {
				uni.navigateTo({
					url: '/pagesA/vip-center/vip-center'
				})
			},
			signin: function() { 
				uni.navigateTo({
					url: '/pagesA/sign-in/sign-in'
				})
			},
			getALICode() {
				let that = this;
				//#ifdef MP-WEIXIN
				uni.getUserInfo({
					success: function(res) {
						uni.login({
							success: function(e) {
								let setdata = {
									code: e.code,
									userinfo: res.userInfo
								}
								api.ApiGet({
									do: 'wx_login',
									code: e.code,
									nickName: setdata.userinfo.nickName,
									avatarUrl: setdata.userinfo.avatarUrl,
								}, (re) => {
									that.users = {
										info: {
											name: res.userInfo.nickName,
											thumb: res.userInfo.avatarUrl
										}
									}
									that.hasLogin = true
									uni.setStorageSync("token", re.data.datas.token);
									uni.showToast({
										title: '登录成功'
									})
									that.getdata()
								})

							}
						})
					}
				})
				//#endif
			},
		},

	}
</script>
<style lang="scss">
	page {
		background-color: $uni-bg;
	}

	.footer-menu {
		z-index: 9999;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		height: 100upx;
		display: flex;
		transform: translatez(200px);
		-webkit-transform: translate3d(0, 0, 0);
		box-shadow: 1px 0px 6px rgba(0, 0, 0, .3);

		.icon-item {
			float: left;
			display: block;
			text-align: center;
			width: 25%;
			height: 100upx;
			font-size: 24upx;
			text-align: center;

			image {
				text-align: center;
				width: 50upx;
				height: 50upx;
			}
		}
	}

	.wechat-mask {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		background-color: rgba($color: #000000, $alpha: .5);
		z-index: 999;
	}

	.wechat-popup {
		position: fixed;
		top: 30%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 350upx;
		z-index: 999;

		.wechat-t {
			font-size: 28upx;
			color: #fff;
			text-align: center;
			margin: 20upx;
		}

		.ewm {
			width: 350upx;
			height: 350upx;
		}

		.close {
			width: 30upx;
			height: 30upx;
			margin: 60upx 130upx;
			background-color: #676769;
			padding: 20upx;
			border-radius: 50%;
		}
	}

	.post {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0upx;
		z-index: 10000;
		text-align: center;

		.wrapper {
			height: 1420upx;
			width: 610upx;
			margin: 0 auto;
			margin-top: -150upx;

			// margin-top: 50upx;
		}
	}

	.cha {
		background-image: url('../../static/mg-h5hb/chacha.png');
		background-size: 80upx 80upx;
		position: relative;
		top: 40upx
	}

	.user-section {
		height: 520upx;
		padding: 100upx 30upx 0;
		position: relative;

		.user-qd {
			position: absolute;
			top: 60upx;
			right: 0;
			width: 150upx;
			height: 60upx;
			border-radius: 30upx 0 0 30upx;
			background-color: #FF8448;
			font-size: 30upx;
			color: #fff;
			text-align: center;
			line-height: 60upx;
			z-index: 3;
		}

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 500rpx;
			background: linear-gradient(left,#FE7F49, #FB5B5D);
			// opacity: 0.7;
		}
	}

	.user-name {
		margin-left: 24upx;
		color: #fff;
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: 26upx;
			color: #FD6B53;
			margin-left: 20upx;
		}
	}

	.login-btn {
		color: #fff;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		background: #ff0000;
		font-size: 12px;
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: 26upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: 28upx;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		background: $uni-bg;
		margin-top: -230upx;
		padding: 0 20upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		border-radius: 8upx;
		text-align: center;

		.tj-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 33.33%;
			padding: 25upx 0;
			font-size: 30upx;
			color: #75787d;
		}

		.num {
			font-size: 30upx;
			color: #333;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		display: flex;
		justify-content: space-around;
		padding: 28upx 0;
		margin-top: 20upx;
		background-color: #fff;
		border-radius: 8upx;

		.order-item {
			display: flex;
			justify-items: center;
			flex-direction: column;
			text-align: center;
			width: 33.33%;
			height: 120upx;
			border-radius: 10upx;
			font-size: 30upx;
			color: #ff7159;

			image {
				width: 52upx;
				height: 52upx;
				margin: 0 auto;
			}

			view {
				margin-top: 16upx;
				color: #333;
			}
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.user-infor {
		display: flex;
		align-items: center;
	}

	.list-item {
		margin-top: 20upx;
		margin-bottom: 100upx;
		background-color: #fff;
		border-radius: 8upx;
		padding: 20upx;

		.list-i {
			display: flex;
			justify-content: space-between;
			padding: 28upx 0;
			border-bottom: 1upx solid #eaeaea;

			&:last-child {
				border-bottom: 0;
			}

			.list-il {
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
				}

				view {
					font-size: 30upx;
					color: #333;
					margin-left: 18upx;
				}
			}

			.list-next {
				width: 30upx;
			}
		}
	}
</style>
